<template>
  <div class="common_page createAct">
    <div class="create_wrap">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="活动名称" prop="title">
          <el-input
            :maxlength="128"
            v-model="form.title"
            @blur="handleTitle"
          ></el-input>
        </el-form-item>

        <el-form-item label="活动时间" required>
          <el-row class="row_wrap">
            <el-col :span="11">
              <el-form-item prop="beginTime">
                <el-date-picker
                  v-model="form.beginTime"
                  format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择活动开始时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="endTime">
                <el-date-picker
                  v-model="form.endTime"
                  format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择活动结束时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="活动介绍" prop="introduction">
          <el-row class="row_wrap">
            <el-col :span="24" class="introduce_wrap">
              <div class="editor_box">
                <ueEditor
                  v-model="form.introduction"
                  @change="desChange"
                  :temp="temp"
                ></ueEditor>
              </div>
              <div class="temp_box">
                <div class="temp_head">活动简介模板</div>
                <ul class="temp_list">
                  <li
                    class="temp_item"
                    v-for="(item, index) in tempList"
                    :key="index"
                    @click="handleSelectTemp(item)"
                    :class="{ active: tempId === item.id }"
                  >
                    <div v-html="item.data"></div>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="btn_wrap">
        <el-button @click="handleCancel" plain>取消</el-button>
        <el-button @click="handleConfirm" type="primary">创建活动</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import ueEditor from "@/components/ueEditor";
import { formatDate } from "@/utils/filter";
export default {
  components: { ueEditor },
  data() {
    return {
      form: {
        title: "", //标题 最大长度为128个字符
        beginTime: "", //example: 2021-04-02 22:12:00   格式yyyy-MM-dd HH:mm:ss
        endTime: "",
        introduction: "", //简介 最大长度为2048个字符
      },
      rules: {
        title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        beginTime: [
          {
            type: "date",
            required: true,
            message: "选择活动开始时间",
            trigger: "change",
          },
        ],
        endTime: [
          {
            type: "date",
            required: true,
            message: "选择活动结束时间",
            trigger: "change",
          },
        ],
        introduction: [
          { required: true, message: "请输入活动介绍", trigger: "blur" },
        ],
      },
      tempList:[],
      tempId: "",
      temp: "",
    };
  },
  created(){
    this.$api('resource.getTemporary',{
      type:'INTRODUCTION'
    }).then(res=>{
      console.log(res)
      this.tempList=res
    })
  },
  mounted() {},
  methods: {
    handleCancel() {
      this.$router.go(-1);
    },
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const beginTime = new Date(this.form.beginTime).getTime();
          const endTime = new Date(this.form.endTime).getTime();
          if (beginTime > endTime) {
            this.$message({
              message: "活动开始时间不能大于活动结束时间",
              duration: 1000,
              type: "error",
            });
          } else {
            //创建
            const { title, introduction } = this.form;
            this.$api("vote.save", {
              title, //标题 最大长度为128个字符
              beginTime: formatDate(beginTime), //example: 2021-04-02 22:12:00   格式yyyy-MM-dd HH:mm:ss
              endTime: formatDate(endTime),
              introduction, //简介 最大长度为2048个字符
              contestantCategory: "", //选手类型 创建可为空；自定义或列表中选择；最大长度为8个字符；见选手类别接口
              contestantCategoryUnit: "", //选手类别单位 创建可为空；自定义或列表中选择；最大长度为4个字符；见选手类别单位接口
              id: 0, //编号 创建时为空
              type: "", //类型 创建可为空；自定义或列表中选择；最大长度为8个字符；见类型接口
              unit: "", //单位 创建可为空；自定义或列表中选择；最大长度为4个字符；见单位接口
            }).then((res) => {
              this.$message({
                message: "创建成功",
                type: "success",
                duration: 1000,
              });
              this.$router.push({
                path: "/manage/setup",
                query: {
                  t: "act",
                  id: res,
                },
              });
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    desChange(val) {
      this.form.introduction = val;
    },
    //选择模板
    handleSelectTemp(item) {
      this.tempId = item.id;
      this.temp = item.data;
    },
  },
};
</script>


<style lang="scss" scoped>
.createAct {
  .create_wrap {
    width: 924px;
  }
  ::v-deep.el-input {
    width: 100%;
  }

  .row_wrap {
    .line {
      text-align: center;
    }
    .introduce_wrap {
      display: flex;
      height: 582px;
      .editor_box {
        flex: 1;
      }
      .temp_box {
        width: 283px;
        height: 100%;
        border: 1px solid #dcdfe6;
        background-color: #f5f6f8;
        box-sizing: border-box;

        .temp_head {
          width: 100%;
          height: 34px;
          line-height: 34px;
          text-align: center;
          border-bottom: 1px solid #dcdfe6;
        }
        .temp_list {
          overflow-y: auto;
          height: calc(100% - 34px);
          padding: 0 12px;
          .temp_item {
            font-size: 14px;
            width: 100%;
            height: 92px;
            overflow: hidden;
            background: #fff;
            user-select: none;
            box-shadow: 0 1px 7px 0 rgb(0 0 0 / 7%);
            border-radius: 4px;
            cursor: pointer;
            padding: 10px;
            margin: 15px 0;
            border: 1px solid transparent;

            > div {
              color: #666;
              text-align: justify;
              white-space: pre-wrap;
              line-height: 1.6;
              zoom: 0.67733;
            }
            &:hover {
              border-color: $themeColor;
            }
            &.active {
              border-color: $themeColor;
            }
          }
        }
      }
    }
  }
  .btn_wrap {
    padding-left: 380px;
    margin-top: 40px;
    width: 100%;
  }
}
</style>